<template>
  <view class="h-full">
    <!-- 懒加载渲染分页列表 -->
    <z-paging
      v-if="firstLoaded || isCurrentPage"
      ref="paging"
      v-model="dataList"
      :fixed="false"
      :enable-back-to-top="isCurrentPage"
      @query="handleQuery"
    >
      <!-- 渲染列表 -->
      <view
        v-for="(item, index) in dataList"
        :key="item?.id || index"
        class="m-[20rpx] flex flex-col gap-[24rpx] rounded-[8rpx] bg-white p-[20rpx] shadow-[0_4rpx_8rpx_rgba(0,0,0,0.05)]"
      >
        <!-- 顶部标题：产品名 + 状态 -->
        <view class="flex items-center justify-between">
          <text class="text-[28rpx] text-[#333] font-semibold">
            {{ item?.productDescribe || '-' }}
          </text>
          <text
            class="text-[24rpx] font-medium"
            :style="{ color: getStatusColor(item?.status) }"
          >
            {{ formatStatus(item?.status) }}
          </text>
        </view>

        <!-- 中间详情 -->
        <view class="mt-[6rpx] flex flex-col gap-[6rpx]">
          <view class="flex gap-[6rpx]">
            <text class="text-[26rpx] text-[#999]">{{ $t('orderNoLabel') }}</text>
            <text class="text-[26rpx] text-[#333]">{{ item?.orderNo || '-' }}</text>
          </view>
          <view class="flex gap-[6rpx]">
            <text class="text-[26rpx] text-[#999]">{{ $t('orderTimeLabel') }}</text>
            <text class="text-[26rpx] text-[#333]">{{ timeFormat(item?.orderTime) }}</text>
          </view>
        </view>

        <!-- 底部金额/操作 -->
        <view class="my-[10rpx] flex items-center justify-between">
          <!-- 金额显示 -->
          <view class="my-[10rpx] flex flex-row items-end justify-between">
            <!-- 金额显示 -->
            <text class="text-[28rpx] font-semibold" :style="{ color: getAmountColor(item?.status) }">
              <text class="mr-[4rpx] text-[20rpx]">¥</text>{{ (item?.amount || 0).toFixed(2) }}
            </text>

            <!-- 示例操作按钮 -->
            <!-- <button class="px-[16rpx] py-[8rpx] bg-[#FF5A5F] text-white text-[26rpx] rounded-[12rpx]">去支付</button> -->
          </view>

          <!-- 示例操作按钮（可根据状态动态显示） -->
          <!--
  <button class="px-[16rpx] py-[8rpx] bg-[#FF5A5F] text-white text-[26rpx] rounded-[12rpx]">
    去支付
  </button>
  -->
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script lang="ts" setup>
import { timeFormat } from '@climblee/uv-ui/libs/function/index.js'
import { ref, watch } from 'vue'

const props = defineProps<Props>()

// 状态映射
const STATUS_COLORS: Record<number, string> = {
  1: '#FF5A5F', // 待支付
  2: '#FF9F0A', // 已支付
  3: '#0BCF83', // 开始服务
  4: '#999999', // 结束服务
}

function getStatusColor(status?: number) {
  if (!status)
    return '#000' // 默认黑色
  return STATUS_COLORS[status] || '#000'
}
function getAmountColor(status?: number) {
  switch (status) {
    case 2: return '#FF5A5F' // 待支付 - 红色
    case 3: return '#007AFF' // 已支付 - 蓝色
    case 4: return '#0BCF83' // 服务中 - 绿色
    default: return '#333' // 默认
  }
}

function formatStatus(status?: number) {
  switch (status) {
    case 2: return '待支付'
    case 3: return '已支付'
    case 4: return '服务中'
    case 5: return '已结束'
    default: return '未知'
  }
}

// props
interface QueryArgs {
  pageNo: number
  pageSize: number
  tabIndex: number
}

interface Props {
  tabIndex?: number
  currentIndex?: number
  /**
   * queryFunction 接收 { pageNo, pageSize, tabIndex }
   * 必须返回 Promise，resolve 对象中包含 list 数组
   */
  queryFunction: (args: QueryArgs) => Promise<{ list: any[] }>
}

const paging = ref(null)
const dataList = ref([])

// 是否第一次加载完成
const firstLoaded = ref(false)
// 是否当前激活页
const isCurrentPage = ref(false)

// 当前页变化时，懒加载
watch(
  () => props.currentIndex,
  (newVal) => {
    if (newVal === props.tabIndex && !firstLoaded.value) {
      // 延迟渲染 z-paging，避免部分平台报错
      setTimeout(() => {
        isCurrentPage.value = true
      }, 50)
    }
  },
  { immediate: true },
)

// 分页请求
async function handleQuery(pageNo, pageSize) {
  if (!props.queryFunction)
    return
  try {
    const res = await props.queryFunction({ pageNo, pageSize, tabIndex: props.tabIndex })
    const list = Array.isArray(res?.list) ? res.list : []
    paging.value.complete(list)
    firstLoaded.value = true
  }
  catch (err) {
    console.error(err)
    paging.value.complete(false)
  }
}
</script>

<style scoped>

</style>
